<template>
    <div>
        <van-nav-bar :title='active' />
        <router-view></router-view>
        <van-tabbar v-model="active" route active-color="lightgreen">
            <van-tabbar-item name="首页" to="/m/home" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item name="分类" to="/m/category" icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item name="购物车" to="/m/cart" icon="cart-o">购物车</van-tabbar-item>
            <van-tabbar-item name="我的" to="/m/profile" icon="user-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup lang='ts'>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const active = ref<string>('首页')

watch(
    () => route.path,
    (newPath) => {
        switch (newPath) {
            case '/m/home':
                active.value = '首页';
                break;
            case '/m/category':
                active.value = '分类';
                break;
            case '/m/cart':
                active.value = '购物车';
                break;
            case '/m/profile':
                active.value = '我的';
                break;
            default:
                active.value = '首页'; // 默认值
        }
    },
    { immediate: true } 
);
</script>

<style scoped></style>